{% extends 'cms/cms_base.html' %}

{% block title %}
    熊熊论坛后台轮播图管理
{% endblock %}

{% block head %}
    <script src="https://cdn.staticfile.org/Plupload/2.1.1/moxie.js"></script>
    <script src="https://cdn.staticfile.org/Plupload/2.1.1/plupload.dev.js"></script>
    <script src="https://cdn.staticfile.org/qiniu-js-sdk/1.0.14-beta/qiniu.js"></script>
    <script src="{{ url_for('static', filename='common/clqiniu.js') }}"></script>
    <script src="{{ url_for('static',filename='cms/js/banners.js') }}"></script>
    <style>
        .top-box button {
            float: right;
        }
    </style>
{% endblock %}

{% block page_title %}
    熊熊轮播图管理
{% endblock %}

{% block role %}
    {{ max_role }}
{% endblock %}

{% block content %}
    <div class="top-box">
        <button class="btn btn-warning" data-toggle="modal" data-target="#banner-dialog">添加轮播图</button>
    </div>
    <table class="table table-bordered">
        <thead>
        <tr>
            <th>名称</th>
            <th>图片链接</th>
            <th>跳转链接</th>
            <th>优先级</th>
            <th>创建时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        {% for banner in banners %}
            <tr data-name="{{ banner.name }}" data-image="{{ banner.image_url }}" data-link="{{ banner.link_url }}"
            data-priority="{{ banner.priority }}" data-id="{{ banner.id }}">
            <td>{{ banner.name}}</td>
            <td><a href="{{ banner.image_url }}" target="_blank">{{ banner.image_url | truncate(45) }}</a></td>
            <td><a href="{{ banner.link_url }}" target="_blank">{{ banner.link_url | truncate(35) }}</a></td>
            <td>{{ banner.priority }}</td>
            <td>{{ banner.create_time }}</td>
            <td>
                <button class="btn btn-default btn-xs edit-banner-btn">编辑</button>
                <button class="btn btn-danger btn-xs delete-banner-btn">删除</button>
            </td>
        </tr>
        {% endfor %}



        </tbody>
    </table>

    <!-- Modal -->
    <div class="modal fade" id="banner-dialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">轮播图</h4>
                </div>
                <div class="modal-body">
                    <form action="" class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">名称：</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="name" placeholder="轮播图名称">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">图片：</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" name="image_url"
                                       placeholder="轮播图图片">
                            </div>
                            <button class="btn btn-info col-sm-2" id="upload-btn">添加图片</button>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">跳转：</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="link_url" placeholder="跳转链接">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">权重：</label>
                            <div class="col-sm-10">
                                <input type="number" class="form-control" name="priority" placeholder="优先级">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="save-banner-btn">保存</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}